<!--作者：黄良运-->
<!--使用js根据日期改变颜色的课程表-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
    <style>
        .center {
            text-align: center;
            WORD-WRAP: break-word;
            background-color: rgba(143, 139, 142, 0.96);
        }
        .center2 {
            text-align: center;
            WORD-WRAP: break-word;/*自动换行*/
        }

        table {
            table-layout: fixed;/*列宽由表格宽度和列宽决定，automatic：列宽由内容决定*/
            width: 600px;
            height: 800px;
            border-collapse: collapse;
            align-content: center;/*项目位于容器的中心*/

        }
    </style>

</head>
<body>
<table cellpadding="15" cellspacing="1" border="1" align="center">
    <caption>2016-2017第二学期课表
        <tr>
            <th>节次</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>

        <tr>
            <td class="center2">第一节
                <div>(07:50~08:35)</div>
            </td>
            <td name="day1" colspan="1" rowspan="2" class="center">操作系统B<br/>逸夫楼509[媒110]</td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td name="day4" colspan="1" rowspan="2" class="center">操作系统B<br/>逸夫楼509[媒110]</td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="12" name="day6">自习</td>
            <td colspan="1" rowspan="12" name="day7">自习</td>
        </tr>

        <tr>
            <td class="center2">第二节
                <div>(08:40~09:25)</div>
            </td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>
        </tr>

        <tr>
            <td class="center2">第三节
                <div>(9:40~10:25)</div>
            </td>
            <td rowspan="1" colspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td name="day3" class="center" colspan="1" rowspan="3">软件工程js<br/>博文210[媒159]</td>
            <td name="day4" class="center" colspan="1" rowspan="2">大学英语四<br/>外文504</td>
            <td name="day5" class="center" colspan="1" rowspan="3">大学体育4</td>

        </tr>

        <tr>
            <td class="center2">第四节
                <div>(10:30~11:15)</div>
            </td>
            <td rowspan="1" colspan="1"></td>
            <td colspan="1" rowspan="1"></td>

        </tr>

        <tr>
            <td class="center2">第五节
                <div>(11:20~12:05)</div>
            </td>
            <td rowspan="1" colspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>

        </tr>

        <tr>
            <td class="center2">第六节
                <div>(13:40~14:25)</div>
            </td>
            <td name="day1" class="center" rowspan="2" colspan="1">多媒体技术<br/>逸夫239</td>
            <td name="day2" class="center" colspan="1" rowspan="2">软件工程js<br/>博文205</td>
            <td name="day3" class="center" colspan="1" rowspan="2">web开发基础<br/>博文506</td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>

        </tr>

        <tr>
            <td class="center2">第七节
                <div>(14:30~15:15)</div>
            </td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>

        </tr>

        <tr>
            <td class="center2">第八节
                <div>(15:30~16:15)</div>
            </td>
            <td name="day1" class="center" rowspan="2" colspan="1">多媒体技术中心机房</td>
            <td name="day2" class="center" colspan="1" rowspan="2">数据库原理及应用A<br/>博文305</td>
            <td name="day3" class="center" colspan="1" rowspan="2">web开发基础<br></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>

        </tr>

        <tr>
            <td class="center2">第九节
                <div>(16:20~17:05)</div>
            </td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>

        </tr>

        <tr>
            <td class="center2">第十节
                <div>(18:40~19:25)</div>
            </td>
            <td rowspan="1" colspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>

        </tr>

        <tr>
            <td class="center2">第十一节
                <div>(19:30~20:15)</div>
            </td>
            <td rowspan="1" colspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>

        </tr>

        <tr>
            <td class="center2">第十二节
                <div>(20:20~21:05)</div>
            </td>
            <td rowspan="1" colspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>
            <td colspan="1" rowspan="1"></td>

        </tr>
    </caption>
</table>
<script>
    var day = new Date().getDay();
    var dayid = document.getElementsByName("day" + day);
    for (var i = 0; i < dayid.length; i++) {
        dayid[i].style.backgroundColor = "#ff4b1b";
    }
</script>
</body>
</html>
